<template>
<div class="myyinyue">
 <div class="title">
   <img src="../img/myyinyue/yun.png" alt="" class="img1">
   <span>我的音乐</span>
   <img src="../img/myyinyue/yinp.png" alt="" class="img2">
 </div>
  <div class="userinfo">
    <ul>
      <li>
        <span class="simg">
          <img src="../img/myyinyue/yinyue.png" alt="">
        </span>
        <span class="stext">
          <span class="s1">本地音乐</span>
          <span class="s2">0</span>
          <span class="s3"><img src="../img/nextsetup.png" alt=""></span>
        </span>
      </li>
      <li>
        <span class="simg">
          <img src="../img/myyinyue/play.png" alt="">
        </span>
        <span class="stext">
          <span class="s1">最近播放</span>
          <span class="s2">{{oldPlay}}</span>
          <span class="s3"><img src="../img/nextsetup.png" alt=""></span>
        </span>
      </li>
      <li>
        <span class="simg">
          <img src="../img/myyinyue/yanzou.png" alt="">
        </span>
        <span class="stext">
          <span class="s1">我的电台</span>
          <span class="s2">{{userDtai}}</span>
          <span class="s3"><img src="../img/nextsetup.png" alt=""></span>
        </span>
      </li>
      <li>
        <span class="simg">
          <img src="../img/myyinyue/shoucang.png" alt="">
        </span>
        <span class="stext">
          <span class="s1">我的收藏</span>
          <span class="s2">2</span>
          <span class="s3"><img src="../img/nextsetup.png" alt=""></span>
        </span>
      </li>
      <li class="li5">
        <span class="simg">
          <img src="../img/myyinyue/yueliang.png" alt="">
        </span>
        <span class="stext">
          <span class="s1">Sita空间</span>
          <span class="s2"></span>
          <span class="s3"><img src="../img/nextsetup.png" alt=""></span>
        </span>
      </li>
    </ul>
  </div>
  <div class="cjgedan">
    <p>

      <img src="../img/myyinyue/xia.png" alt="" class="i1" v-if="isShow" @click="show">
      <img src="../img/myyinyue/you.png" alt="" class="i1" v-else="!isShow" @click="show">
      <span>我创建的歌单({{userLove.length}})</span>
      <img src="../img/myyinyue/more.png" alt="" class="i2">
    </p>
    <ul v-show="isShow">
      <li v-for="(key,item) in userLove" :key="item" >
        <span class="simg">
          <img :src=userLove[item].coverImgUrl alt="">
        </span>
        <span class="stext">
            <span class="s1">
              {{userLove[item].name}}
            </span>
            <br>
            <span class="s2">
              {{userLove[item].trackCount}}首
            </span>

        </span>
        <span class="sbtn" ref='ss'>
          <img src="../img/myyinyue/love.png" alt="">`
          心动模式
        </span>
      </li>

    </ul>
  </div>
</div>

</template>

<script>
  import {mapState} from 'vuex'
    export default {
        name: "wode",
        data(){
          return{
            isShow:true,
          }
        },
      computed:{
        ...mapState(['userLove','oldPlay','userDtai']),
      },
        methods:{
          show(){
            this.isShow=!this.isShow;
          },

        },
        created(){
          this.$api.getUserMusicList({uid:this.$storage.get('user').account.id});
          this.$api.getOldPlay({uid:this.$storage.get('user').account.id,type:1});
          this.$api.getUserDtai({uid:this.$storage.get('user').account.id});

        },
      updated(){
         for(let i = 0; i <  this.$refs.ss.length; i ++){
          if(i === 0){
            this.$refs.ss[i].style.display='block';
          }else {
            this.$refs.ss[i].style.display='none';
          }
        }
      },
      mounted(){

      }

    }
</script>

<style lang="scss">
  *{
    margin: 0px;
    padding: 0px;
  }
.myyinyue{
  width: 1245px;
  .title{
    box-sizing: border-box;
    background-color: #c64b3e;
    padding: 85px 0 30px 0;
    font-size: 50px;
    color: white;
    position: relative;
    text-align: center;
    font-weight: bold;
    img{
      width: 85px;
      position: absolute;
      vertical-align: middle;
    }
    .img1{
      left: 40px;
    }
    .img2{
      right: 50px;
    }
    span{
      display: inline-block;
      margin: 0 auto;
      vertical-align: middle;
    }
  }
  .userinfo{
    ul{
      .li5{
        .stext{
          border: none;
        }
      }
      li{
        list-style: none;
        font-size: 0;
        span{
          vertical-align: middle;
          display: inline-block;
        }
        .simg{
          box-sizing: border-box;
          padding: 0 70px 0 60px;
          img{
            width: 75px;
            object-fit: cover;
          }
        }
        .stext{
          position: relative;
          width: 1040px;
          padding-top: 55px;
          padding-bottom: 55px;
          box-sizing: border-box;
          border-bottom: 2px solid #ccc;
          .s1{
            font-size: 50px;
            font-weight: bold;
            color: #323233;
          }
          .s2{
            position: absolute;
            right: 90px;
            top: 50%;
            margin-bottom: 10px;
            transform: translateY(-50%);
            font-size: 40px;
            color: #969798;
          }
          .s3{
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            right: 20px;
            img{
              width: 70px;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
  .cjgedan{
    font-size: 50px;
    color: white;

    font-weight: bold;
    p{
      background-color: #efeff0;
      box-sizing: border-box;
      padding: 20px;
      position: relative;
      margin-bottom: 10px;
      img{
        width: 45px;
        vertical-align: middle;
      }
      .i1{
        margin-left: 30px;
      }
      span{
        text-indent: 15px;
        display: inline-block;
        font-size: 35px;
        color: #5f5f60;
        vertical-align: middle;
      }
      .i2{
        position: absolute;
        right: 43px;
        top: 55%;
        transform: translateY(-55%);
      }
    }
    ul{
      li{
        list-style: none;
        font-size: 0;
        position: relative;
        box-sizing: border-box;
        margin-bottom: 15px;
        span{
          font-size: 20px;
          display: inline-block;
          vertical-align: middle;
        }
        .simg{
          box-sizing: border-box;
          margin: 0 20px;
          width: 165px;
          height: 165px;
          border-radius: 10px;
          background-color: aqua;
          img{
            width: 165px;
            height: 165px;
            border-radius: 10px;
          }
        }
        .stext{
          border-bottom: 2px solid #ccc;
          height: 185px;
          box-sizing: border-box;
          width: 1040px;

          .s1{
            margin-top: 25px;
            font-size: 50px;
            color: #383839;
            text-indent: 10px;
          }
          .s2{
            margin-top: 10px;
            text-indent: 10px;
            font-size: 30px;
            color: #969798;
            box-sizing: border-box;
            padding-bottom: 20px;
          }

        }
        .sbtn{
          position: absolute;
          right: 30px;
          font-size: 30px;
          color: #c2463a;
          box-sizing: border-box;
          padding: 20px 30px;
          border-radius: 45px;
          border: 3px solid #c2463a;
          top: 50%;
          transform: translateY(-50%);
          img{
            width: 50px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
